<template>
    <div>
        <!--  标题栏  -->
<!--        <a-affix offset-top="top">-->
            <my-header></my-header>
<!--        </a-affix>-->
        <div class="test">
            <div class="box">
                <div class="detail">
                    <div style="font-weight: 1000; padding-left: 10px; padding-bottom: 10px">
                        <h2>商品详情</h2>
                    </div>
                    <div class="cardComments">
                        <div class="list">
                            <div class="leftBox">
                                <a-image width="200"
                                         :src="srcUrl"
                                         fallback="">
                                </a-image>
                            </div>
                            <div class="rightBox">
                                <div class="rightTitle">
                                    <span style="font-weight: bold">{{ goodsInfo.goodsName }}</span>
                                    <br>
                                    <span style="color: red">￥{{goodsInfo.presentPrice}}元</span>
                                </div>
                                <div class="middle">
                                    <a-button size="large" @click="reduceCount">
                                        <template #icon>
                                            <MinusOutlined />
                                        </template>
                                    </a-button>
                                    <span style="margin: 0 15px; background: #fff">{{count}}</span>
                                    <a-button size="large" @click="addCount">
                                        <template #icon>
                                            <PlusOutlined />
                                        </template>
                                    </a-button>
                                </div>
                                <div class="bottom">
<!--                                    <a-button type="primary" style="margin-right: 10px" @click="apply">立即购买</a-button>-->
                                    <a-button type="primary" danger @click="addShoppingCar">加入购物车</a-button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="userComment">
                    <div class="title">
                        <h2>用户评论</h2>
                    </div>
                    <div class="comments">
                        <a-list
                            v-if="comments.length"
                            :data-source="comments"
                            item-layout="horizontal"
                        >
                            <template #renderItem="{ item }">
                                <a-list-item>
                                    <a-comment
                                        avatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                                        :content="item.content"
                                        author='用户xxx'
                                        :datetime="item.createTime"
                                    />
                                </a-list-item>
                            </template>
                        </a-list>

                        <a-comment>
                            <template #avatar>
                                <a-avatar
                                    src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                                    alt="Han Solo"
                                />
                            </template>
                            <template #content>
                                <a-form-item>
                                    <a-textarea :rows="4" v-model:value="comment" />
                                </a-form-item>
                                <a-form-item>
                                    <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
                                        添加评论
                                    </a-button>
                                </a-form-item>
                            </template>
                        </a-comment>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {defineComponent, reactive, onMounted, toRefs} from "vue";
import myHeader from './header'
import {PlusOutlined, MinusOutlined} from "@ant-design/icons-vue";
import {message} from "ant-design-vue";
import {useRouter, useRoute} from "vue-router";
import {
    apiAddCart,
    apiSaveComment,
    apiGetComment,
    apiGetUserInfo,
    apiGetUserAddress,
    apiGetGoodsRecord
} from "../../../api";


export default defineComponent({
    name: "goodsDetail",
    components: { myHeader, PlusOutlined, MinusOutlined},
    setup() {
        const router = useRouter()
        const route = useRoute()
        const state = reactive({
            count: 1,
            srcUrl: window.sessionStorage.getItem('imgUrl') || '',
            goodsInfo: JSON.parse(route.params.detail),
            comments: [],
            submitting: false,
            comment: '',
            accountId: JSON.parse(window.localStorage.getItem('user')).id,
            balance: undefined
        })

        console.log(33, state.goodsInfo)

        // 点击增加
        const addCount = () => {
            state.count += 1
        }

        // 点击减少
        const reduceCount = () => {
            if (state.count <= 1 ) {
                message.warning('选择的数量不能少于1份')
                return;
            }
            state.count -= 1
        }

        // 加入购物车
        const addShoppingCar = () => {
            // 调用加入购物车的接口，成功跳转到首页页面
            const params = {
                goodsId: state.goodsInfo.id,
                goodsNum: state.count,
                price: state.goodsInfo.presentPrice * state.count,
                shopId: state.goodsInfo.shopId
            }
            apiAddCart(params).then((res) => {
                if (res.data.code == 200) {
                    router.push('/overview')
                    message.success('添加购物车成功')

                }
            })
            // router.push('/overview')
        }

        // 获取用户评论
        const getUserComments = () => {
            const parmas = {
                goodsId:state.goodsInfo.id
            }
            apiGetComment(parmas).then((res) => {
                if (res.data.code == 200) {
                    // 获取成功
                    console.log(99999,res.data)
                    state.comments = res.data.data.list;
                    // 在这里需要做一个处理，展示用户头像，评论时间
                }
            })
        }

        // 点击添加评论
        const handleSubmit = () => {
            if (!state.comment) {
                message.warning('请输入评论')
                return false
            }
            // console.log(state.comment)
            state.submitting = true
            const params = {
                accountId: state.accountId,
                content: state.comment,
                goodsId: state.goodsInfo.id
            }
            // 调用接口
            apiSaveComment(params).then((res) => {
                if (res.data.code == 200) {
                    message.success('评论成功')
                    state.comment = ''
                    state.submitting = false
                }
            }).finally(() => {
                state.submitting = false
                getUserComments()
            })
        }

        // 点击立即购买
        const apply = async () => {
            // 获取个人信息， 判断余额够不够
            const res = await apiGetUserInfo({})
            state.balance = res.data.data.balance
            if (state.balance < state.goodsInfo.presentPrice * state.count) {
                message.warning('余额不足，请先前往个人中心进行充值')
                return false
            }
            // 调用地址接口，查看是否有地址
            const params = {
                id: state.accountId
            }
            const addres = await apiGetUserAddress(params)
            // console.log(addres)
            if (!addres.data.data.detailAddress) {
                message.warning('请先添加收货地址')
                return false
            }
            // console.log(99999999, state.goodsInfo)
            apiGetGoodsRecord(state.goodsInfo).then((res) => {
                if (res.data.code == 200) {
                    console.log(339999999, res)
                }
            })
        }

        onMounted(() => {
            getUserComments()
        })
        return {
            ...toRefs(state),
            reduceCount,
            addCount,
            addShoppingCar,
            handleSubmit,
            apply
        }
    }
})
</script>

<style lang="less" scoped>
        .test {
            width: 100%;
            background: url("../../../assets/img/background/bg.jpeg") repeat;
            padding-top: 20px;
            .box {
                width: 80%;
                height: calc(100vh - 70px) ;
                background: #fff;
                //padding-top: 10px;
                margin: 0 auto;
                //height: 400px;
                //border: 1px solid #fafafa;

                display: flex;
                align-items: center;
                justify-content: space-between;

                .detail {
                    width: 50%;
                    height: 85vh;

                    .title {

                        //background: #fff;
                        //font-size: 20px;
                        font-weight: bold;
                        //text-align: left;
                        //position: relative;
                        //top: 5%;
                        //left: 3%;
                    }

                    .cardComments {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        .list {
                            //width: 50%;
                            //margin-top: 50px;
                            position: relative;
                            //top: 25%;
                            //transform: translateY(-50%);
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            .leftBox {
                                margin-right: 50px;
                                width: 250px;
                            }

                            .rightBox {
                                font-size: 22px;
                                .middle {
                                    margin: 20px 0;
                                }
                            }
                        }
                        //.comments {
                        //    width: 50%;
                        //}
                    }
                    //background: #fff;

                }

                .userComment {
                    width: 50%;
                    height: 85vh;
                    overflow-y: scroll;

                    padding: 20px 30px;

                }

            }
        }
    //}
</style>
